    <template>
        <div>
            <el-card class="!border-none p-4" shadow="never">
                <el-page-header content="林下参种植主体信息详情" @back="$router.back()" class="text-lg font-medium text-gray-800 mb-[16px]" />
                <el-form ref="formRef" class="mb-[-16px] gap-4 flex flex-wrap" :model="queryParams" :inline="true">
                    <el-form-item v-if="grade !== 3" class="w-[280px]" label="所属区域">
                        <area-picker v-model="areas"></area-picker>
                    </el-form-item>
                    <el-form-item class="w-[280px]" label="主体名称">
                        <el-input v-model="queryParams.entity_name" placeholder="请输入主体名称" clearable
                            @keyup.enter="resetPage" />
                    </el-form-item>
                    <el-form-item class="w-[280px]" label="种植地点">
                        <el-input v-model="queryParams.address" placeholder="请输入种植地点" clearable
                            @keyup.enter="resetPage" />
                    </el-form-item>
                    <el-form-item label="提交时间">
                        <daterange-picker v-model:startTime="queryParams.start_time"
                            v-model:endTime="queryParams.end_time" />
                    </el-form-item>
                    <!-- <el-form-item class="w-[280px]" label="注册来源">
                        <el-select v-model="queryParams.channel">
                            <el-option v-for="(item, key) in ClientMap" :key="key" :label="item" :value="key" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="toSearch">查询</el-button>
                        <el-button @click="resetData">重置</el-button>
                        <export-data class="ml-4" :fetch-fun="getPlantingList" :params="{...queryParams, user_id: route.query.id}"
                            :page-size="pager.size" />
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="!border-none mt-4 p-4" shadow="never">
                <div class="mb-4 text-center text-2xl font-bold">种植面积合计: {{ areasNum }} 亩</div>
                <el-table size="large" v-loading="pager.loading" :data="pager.lists"
                    style="--el-table-border-color: rgba(180, 185, 195, 2)">
                    <el-table-column label="主体名称" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.entity_name || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="地址" min-width="80" align="center">
                        <template #default="{ row }">
                            {{ row.comp_address || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="种植地点" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.address || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="种植品种" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.variety || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="种植面积" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.planting_area || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="提交时间" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.create_time || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="采收面积(亩)" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.actual_production_area || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="采收量(公斤)" min-width="50" align="center">
                        <template #default="{ row }">
                            {{ row.actual_production_volume || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button v-perms="['plants.plants/detail']" type="primary" link>
                                <router-link :to="{
                                    path: getRoutePath('plants.plants/detail'),
                                    query: {
                                        id: row.id
                                    }
                                }">
                                    详情
                                </router-link>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog v-model="dialogVisible" :title="'图片查看'" width="50%">
                    <el-carousel v-if="imageList.length" v-model="currentImageIndex" arrow="always">
                        <el-carousel-item v-for="(image, index) in imageList" :key="index">
                            <el-image :src="image" fit="contain" style="width: 100%; height: 200px" />
                        </el-carousel-item>
                    </el-carousel>
                </el-dialog>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-card>
        </div>
    </template>
<script lang="ts" setup name="consumerLists">
import config from '@/config'
import { ref, reactive, onActivated } from 'vue'
import { getPlantingList, getPlantingsArea } from '@/api/Plantings'
import { ClientMap } from '@/enums/appEnums'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
const route = useRoute()
const formRef = ref(null)
const queryParams = reactive({
    address: '',
    entity_name: '',
    channel: '',
    start_time: '',
    end_time: '',
    province_id: '',
    city_id: '',
    area_id: ''
})
const areas = ref()

import useUserStore from '@/stores/modules/user.ts'
const userState = useUserStore()
const grade = computed(()=> {
    return userState.userInfo.grade
})
watch(areas, (val)=> {
    queryParams.province_id = val[0] || ''
    queryParams.city_id = val[1] || ''
    queryParams.area_id = val[2] || ''
})
const resetData = ()=> {
    areas.value = []
    resetParams()
    getTotals()
}

const toSearch = ()=> {
    resetPage()
    getTotals()
}

const areasNum = ref(0)
const getTotals = ()=> {
    getPlantingsArea({...queryParams, user_id: route.query.id}).then(res=> {
        areasNum.value = res.areas
    })
}


const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getPlantingList,
    params: queryParams,
    fixedParams: {
        user_id: route.query.id,
    }
})

// 组件激活时获取列表数据
onActivated(() => {
    getLists()
})
getLists()
getTotals()
// // 组件挂载时获取列表数据
// onMounted(() => {
//     getLists()
// })

// 弹窗是否显示
const dialogVisible = ref(false)
// 当前图片列表
const imageList = ref<string[]>([])
// 当前图片索引
const currentImageIndex = ref(0)

// 打开图片浏览工具
const openImageGallery = (images: string[], index: number) => {
    imageList.value = images.map(img => config.baseUrl + img)
    currentImageIndex.value = index
    dialogVisible.value = true
}
</script>
<style scoped lang="scss">
.el-form-item__label {
    font-weight: 500;
}

.el-card {
    padding: 16px;
}

.el-form {
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
}

.export-data {
    margin-left: 16px;
}
</style>
